import React, { useEffect, useState } from 'react';
import { Card, Descriptions, Tag, Spin, message } from 'antd';
import { useParams, useNavigate } from 'react-router-dom';
import { getOrderDetail, OrderDetail as IOrderDetail } from '../../../services/order';
import './styles.css';

const OrderDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<IOrderDetail>();

  useEffect(() => {
    if (id) {
      fetchOrderDetail(id);
    }
  }, [id]);

  const fetchOrderDetail = async (orderId: string) => {
    try {
      setLoading(true);
      const response = await getOrderDetail(orderId);
      setData(response);
    } catch (error) {
      message.error('获取订单详情失败');
    } finally {
      setLoading(false);
    }
  };

  const renderStatus = (status: string) => {
    const statusMap = {
      PENDING: { text: '待支付', color: 'warning' },
      PAID: { text: '已支付', color: 'success' },
      CANCELLED: { text: '已取消', color: 'default' },
      REFUNDED: { text: '退款', color: 'error' },
    };
    const { text, color } = statusMap[status as keyof typeof statusMap] || { text: status, color: 'default' };
    return <Tag color={color}>{text}</Tag>;
  };

  const renderPayStatus = (status: string) => {
    const statusMap = {
      UNPAID: { text: '未支付', color: 'default' },
      PAID: { text: '已支付', color: 'success' },
      PAYMENT_FAILED: { text: '支付失败', color: 'error' },
    };
    const { text, color } = statusMap[status as keyof typeof statusMap] || { text: status, color: 'default' };
    return <Tag color={color}>{text}</Tag>;
  };

  if (loading) {
    return <Spin size="large" className="loading" />;
  }

  if (!data) {
    return null;
  }

  return (
    <div className="order-detail-container">
      <Card
        title="订单详情"
        bordered={false}
        extra={
          <a onClick={() => navigate(-1)}>返回</a>
        }
      >
        <Descriptions bordered column={2}>
          <Descriptions.Item label="订单编号">{data.orderNo}</Descriptions.Item>
          <Descriptions.Item label="订单状态">{renderStatus(data.status)}</Descriptions.Item>
          <Descriptions.Item label="产品名称">{data.productName}</Descriptions.Item>
          <Descriptions.Item label="产品类型">{data.productType}</Descriptions.Item>
          <Descriptions.Item label="交易金额">
            {data.amount !== undefined ? `¥${data.amount.toFixed(2)}` : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="支付状态">{renderPayStatus(data.payStatus)}</Descriptions.Item>
          <Descriptions.Item label="买方">{data.buyer}</Descriptions.Item>
          <Descriptions.Item label="卖方">{data.seller}</Descriptions.Item>
          <Descriptions.Item label="支付时间">{data.payTime}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{data.createdAt}</Descriptions.Item>
        </Descriptions>

        {data.productDetail && (
          <Card title="产品信息" className="sub-card">
            <Descriptions bordered column={2}>
              <Descriptions.Item label="产品ID">{data.productDetail.id}</Descriptions.Item>
              <Descriptions.Item label="产品名称">{data.productDetail.name}</Descriptions.Item>
              <Descriptions.Item label="产品描述">{data.productDetail.description}</Descriptions.Item>
              <Descriptions.Item label="产品价格">
                {data.productDetail.price !== undefined ? `¥${data.productDetail.price}` : '-'}
              </Descriptions.Item>
            </Descriptions>
          </Card>
        )}

        {data.paymentInfo && (
          <Card title="支付信息" className="sub-card">
            <Descriptions bordered column={2}>
              <Descriptions.Item label="支付方式">{data.paymentInfo.paymentMethod}</Descriptions.Item>
              <Descriptions.Item label="交易流水号">{data.paymentInfo.transactionId}</Descriptions.Item>
              <Descriptions.Item label="支付时间">{data.paymentInfo.paymentTime}</Descriptions.Item>
              <Descriptions.Item label="支付金额">
                {data.paymentInfo.paymentAmount !== undefined ? `¥${data.paymentInfo.paymentAmount.toFixed(2)}` : '-'}
              </Descriptions.Item>
            </Descriptions>
          </Card>
        )}

        {data.attachments && data.attachments.length > 0 && (
          <Card title="附件信息" className="sub-card">
            <ul className="attachment-list">
              {data.attachments.map((attachment, index) => (
                <li key={index}>
                  <a href={attachment.url} target="_blank" rel="noopener noreferrer">
                    {attachment.name}
                  </a>
                </li>
              ))}
            </ul>
          </Card>
        )}
      </Card>
    </div>
  );
};

export default OrderDetail; 